<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
  import { getMedicalOrderLogistics } from '@/pages/apis/order'
  import type { ExpressData } from '@/types/order'
  import { onMounted, ref } from 'vue'
  // #ifdef APP || H5
  import AMapLoader from '@amap/amap-jsapi-loader'
  // #endif
  import startImg from '@/static/images/start.png'
  import endImg from '@/static/images/end.png'
  import carImg from '@/static/images/car.png'

  function onBackClick() {
    uni.navigateBack({ delta: 1 })
  }

  // 1. 查询物流详情
  // 获取地址参数
  const pageParams = defineProps<{ id: string }>()
  // 当前位置
  const logisticsInfo = ref({} as ExpressData)

  // 查看物流信息
  const getLogistics = async () => {
    // 调用接口
    const data = await getMedicalOrderLogistics(pageParams.id)
    // 渲染数据
    logisticsInfo.value = data
  }

  // #ifdef APP || H5
  // 高德地图
  const initAMap = async () => {
    let map: any = null
    // onMounted(async () => {
    //   // 等数据加载完成，再加载地图

    //   // 获取物流信息
    //   await getLogistics()
    // 配置密钥，需补充类型声明文件
    window._AMapSecurityConfig = {
      securityJsCode: 'b21bb9b5e13cc6b0e2b349ab8e3fe0ec',
    }

    // 配置 key
    const AMap = await AMapLoader.load({
      key: 'fdaa19aa39ea7ce79ce809c70a73f32b',
      version: '2.0',
      plugins: [],
    })

    // 使用 Amap 初始化地图
    // !!!!! 注意：容器名称为 map，与页面 <view id="map"> 的 id 一致
    map = new AMap.Map('map', {
      // 设置地图容器id
      viewMode: '3D', // 是否为3D地图模式
      zoom: 11, // 初始化地图级别
      center: [116.397428, 39.90923], // 初始化地图中心点位置
      //mapStyle: 'amap://styles/whitesmoke', // 设置地图样式
    })
    // 加载驾驶导航插件
    AMap.plugin('AMap.Driving', () => {
      const driving = new AMap.Driving({
        map: map, //地图实例
        showTraffic: false, // 关闭交通状态
        // panel: 'panel', //路径规划结果在地图下显示
        policy: AMap.DrivingPolicy.LEAST_TIME, //路线规划策略
      })
      // 起始点和终点
      const start = logisticsInfo.value.logisticsInfo.shift()
      const end = logisticsInfo.value.logisticsInfo.pop()
      // 途经点，需要用 map 调整为经纬度数组(先长Long后短Lat)
      const waypoints = logisticsInfo.value.logisticsInfo.map((v) => [v.longitude, v.latitude])

      // 搜索路径(起始点, 终点, 途径点, 回调函数)
      driving.search(
        [start?.longitude, start?.latitude], // 起始点
        [end?.longitude, end?.latitude], // 终点
        { waypoints: waypoints }, // 途径点
        (status: string, result: object) => {
          // 回调函数
          console.log(status, result)

          // 起始点标记
          const startMarker = new AMap.Marker({
            icon: startImg, // 自定义图片
            position: [start?.longitude, start?.latitude], // 经纬度
            anchor: 'bottom-center', // 图片位置
          })
          map?.add(startMarker)

          // 终点
          const endMarker = new AMap.Marker({
            icon: endImg, // 自定义图片
            position: [end?.longitude, end?.latitude], // 经纬度
            anchor: 'bottom-center', // 图片位置
          })
          map?.add(endMarker) // 把标记点添加到地图中

          // 当前货车位置
          const carMarker = new AMap.Marker({
            icon: carImg, // 自定义图片
            position: [
              logisticsInfo.value.currentLocationInfo.longitude,
              logisticsInfo.value.currentLocationInfo.latitude,
            ], // 经纬度
            anchor: 'center', // 图片位置
          })
          map.add(carMarker)

          // 3s后，定位到货车，放大地图
          setTimeout(() => {
            // 设置地图中心点（会根据覆盖物自动计算）
            map.setFitView([carMarker])
            // 设置缩放级别
            map.setZoom(10)
          }, 3000)
        }
      )
    })
  }
  // #endif

  onMounted(async () => {
    // 等数据加载完成，再加载地图
    await getLogistics()
    // #ifdef APP || H5
    // 初始化高德地图
    initAMap()
    // #endif
  })
</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 -->
    <!-- #ifdef APP || H5 -->
    <view id="map" class="uni-map"></view>
    <!-- #endif -->
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ logisticsInfo.statusValue }}</cover-view>
      <cover-view class="extra">
        预计 {{ logisticsInfo.estimatedTime }} 送达
        {{ logisticsInfo.name }}
        {{ logisticsInfo.awbNo }} </cover-view
      >o
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content"> 收货地址：广东省广州市大华区明离路科技园880号 </view>
        </view>
        <view v-for="item in logisticsInfo.list" :key="item.id" class="line">
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-if="item.status === 4">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-truck" />
          </view>
          <view class="badge icon" v-if="item.status === 5">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">{{ item.content }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
